<template>
	<!-- 积分兑换 完成 -->
	<view class="container">
		<view class="">
			<my-header title='积分兑换'></my-header>
		</view>
		<!-- 提现显示 -->
		<view class="balance"
			:style="{backgroundImage:(currentBackground === 'bg1'? ImageBg.backgroundImage1 : ImageBg.backgroundImage2)}">
			<view class="money">
				<!-- 展示内容 -->
				<view class="data">
					<view class="numbur">
						<view class="num">
							50
						</view>
					</view>
					<view class="word">积分</view>
				</view>
				<view class="data">
					<view class="numbur">
						<view class="num">
							0.5
						</view>元
					</view>
					<view class="word">积分</view>
				</view>
				<view class="data">
					<view class="numbur">
						<view class="num">
							5
						</view>元
					</view>
					<view class="word">积分</view>
				</view>
			</view>
		</view>
		<!-- 积分体现 -->
		<view class="points">
			<view class="title">
				积分体现
			</view>
			<view class="main">
				<!-- 这里 -->
				<view class="content"
					:style="{backgroundImage:(currindex === index)?(currentBackground === 'bg1'? ImageBg.backgroundImage5 : ImageBg.backgroundImage6):none}"
					v-for="(item,index) in moneryDate" :key="index" @click="onChange(index)">
					<view class="">
						{{item.money}}
					</view>
					<view class="">
						{{item.point}}
					</view>
				</view>
			</view>
		</view>
		<!-- 体现按钮 -->
		<view class="btn">
			<button
				:style="{backgroundImage:(currentBackground === 'bg1'? ImageBg.backgroundImage3 : ImageBg.backgroundImage4)}">
				立即提现
			</button>
		</view>
		<!-- 末尾文字 -->
		<view class="tail">
			<text class="title">温馨提示</text>
			<text>1.提现申请将在1-3个工作日内审批到账，请耐心等待.</text>
			<text>2.积分可累计提现。</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				// 背景图片
				ImageBg: {
					backgroundImage1: 'url(' + require('@/static/style1/zh19.png') + ')',
					backgroundImage2: 'url(' + require('@/static/style2/zh19.png') + ')',
					backgroundImage3: 'url(' + require('@/static/style1/zh20.png') + ')',
					backgroundImage4: 'url(' + require('@/static/style2/zh20.png') + ')',
					backgroundImage5: 'url(' + require('@/static/style1/zh6.png') + ')',
					backgroundImage6: 'url(' + require('@/static/style2/zh6.png') + ')',
				},
				currindex: 0,
				moneryDate: [{
						money: '5元',
						point: '需500积分'
					},
					{
						money: '15元',
						point: '需1500积分'
					},
					{
						money: '25元',
						point: '需2500积分'
					},
					{
						money: '40元',
						point: '需500积分'
					},
					{
						money: '50元',
						point: '需1500积分'
					},
					{
						money: '60元',
						point: '需2500积分'
					},

				]
			}
		},

		methods: {
			// 选中高亮
			onChange(index) {
				this.currindex = index
			}
		},
		created() {
			console.log(this.imageSrc);
		},
		computed: {
			...mapState('theme', ['currentBackground'])

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #11112B;
		color: #fff;
		box-sizing: border-box;

		.balance {
			height: 20%;
			width: 80%;
			margin: 80rpx auto;
			// border: 1px solid red;
			// background: url('@/static/style1/zh19.png');
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 100% 100%;

			.money {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.data {
					width: 20%;

					display: flex;
					flex-direction: column;

					.numbur {

						// border: 1px solid blue;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 100%;
						padding: 20rpx 0;

						.num {
							font-size: 50rpx
						}
					}

					.word {
						padding-left: 29rpx;
					}

				}
			}
		}

		.points {
			height: 30%;
			width: 98%;
			margin: 0 auto;
			position: relative;

			.title {
				font-size: 30rpx;
				position: relative;
				top: -20rpx;
				left: 40rpx;

			}

			.main {
				width: 100%;
				// border: 1px solid red;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;

				.content {
					// border: 1px solid blue;
					width: 30%;
					// height: 0%;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 10rpx 0;
					margin: 9rpx;
					// background-image: none;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 85px 80px;

					view {
						padding: 20rpx 10rpx;
						font-size: 30rpx
					}
				}

			}
		}

		.btn {
			padding: 20rpx 0;
			width: 360rpx;
			// height: 120rpx;
			// height: 100%;
			margin: 0 auto;

			button {
				// border: 1px solid blue;
				color: #fff;
				height: 180rpx;
				width: 368rpx;
				// margin: 30rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// background: url('@/static/style1/zh20.png');
				background-color: transparent;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 180px 72px;
			}
		}

		.tail {
			width: 95%;
			margin: 0 auto;
			// border: 1px solid red;
			display: flex;
			flex-wrap: nowrap;
			flex-direction: column;
			overflow: hidden;
			font-size: 27rpx;

			.title {
				font-size: 30rpx
			}

			text {
				// background-color: #fff;
				margin: 20rpx 10rpx;
			}
		}
	}
</style>